<template>
  <div>
    <el-dialog title="产品列表" :visible.sync="productListDialogVisible" width="60%">
      <!-- 条件查询及搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-select v-model="typeListObj.category" @change="productConditionChange">
            <el-option v-for="item in productOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-col>
        <el-col :span="10">
          <el-input placeholder="请输入内容" v-model="typeListObj.searchData" class="input-with-select" clearable @clear="productConditionChange">
            <el-button slot="append" icon="el-icon-search" @click="productConditionChange"></el-button>
          </el-input>
        </el-col>
      </el-row>
      <!-- 产品类型表格区域 -->
      <table-list ref="tableView" class="table-list-view" :tableConfig="productListtableConfig" :tableData="productListTableData" @rowClick="productRowClick"></table-list>
      <!-- 分页 -->
      <div>
        <table-pagination :total="productTypeListTotal" :currentPage="typeListObj.current" @reset="productTypeReset" @handleSizeChange="productTypeSizeChange" @handleCurrentChange="productTypeCurrentChange"> </table-pagination>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="productListDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="determine">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getProductDelivery, getProductTypeList } from '@/api/productApi.js'

export default {
  data() {
    return {
      productListDialogVisible: false,
      productListtableConfig: {},
      productListTableData: [],
      productTypeListTotal: 0,
      productInfo: {},
      temporaryProductInfo: {},
      typeListObj: {
        category: '全部',
        current: 1,
        deptId: '',
        size: 10,
        searchData: '',
      },
      productOptions: [
        {
          value: '全部',
          label: '全部',
        },
        {
          value: '标准化产品',
          label: '标准化产品',
        },
        {
          value: '应用解决方案',
          label: '应用解决方案',
        },
        {
          value: '核心能力服务',
          label: '核心能力服务',
        },
        {
          value: '运营平台产品',
          label: '运营平台产品',
        },
      ],
    }
  },
  components: {
    tableList: () => import('@/components/common_tables.vue'),
    tablePagination: () => import('@/components/table_pagination.vue'),
    productDeliveryInfo: () => import('./product_delivery_info.vue'),
  },
  created() {
    this.productListtableConfig = {
      isShowIndex: false,
      props: [
        {
          type: 'text',
          label: '所属公司',
          prop: 'deptName',
        },
        {
          type: 'text',
          label: '产品名称',
          prop: 'name',
        },
        {
          type: 'text',
          label: '产品分类',
          prop: 'productCategory',
        },
      ],
      isOpt: false,
    }
  },
  mounted() {},
  methods: {
    // 条件查询及关键字搜索
    productConditionChange() {
      this.typeProductList()
    },
    typeProductList() {
      this.productListDialogVisible = true
      let obj = {
        ...this.typeListObj,
      }
      // 当筛选条件为全部时，category不传
      if (this.typeListObj.category == '全部') {
        delete obj.category
      }
      getProductTypeList(obj).then((res) => {
        // console.log(res, "产品类型");
        if (res.data.code !== 200) return this.$message.error('数据请求失败')
        this.productTypeListTotal = res.data.data.total
        this.productListTableData = res.data.data.records
      })
    },
    // 点击产品类型表格行触发事件
    productRowClick(row) {
      this.temporaryProductInfo = row
      //   console.log(row, '哈哈哈')
    },
    // 分页重置
    productTypeReset() {
      this.typeListObj.current = 1
      this.typeProductList()
    },
    productTypeSizeChange(newsize) {
      this.typeListObj.current = 1
      this.typeListObj.size = newsize
      this.typeProductList()
    },
    productTypeCurrentChange(newpage) {
      this.typeListObj.current = newpage
      this.typeProductList()
    },
    // 确认选择产品类型表格 行，传值给父组件
    determine() {
      this.productInfo = this.temporaryProductInfo
      this.$emit('productInfo', this.productInfo)
      this.productListDialogVisible = false
    },
  },
}
</script>

<style lang="scss" scoped>
</style>